<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: title,
			size: '550px'
		}"
		show-confirm
		confirm-text="提交"
		@confirm="submit"
		@close="reset"
		:saving="saving"
	>
		<el-form ref="form" label-position="top" :model="form" :rules="rules">
			<el-form-item label="抄送人">
				<select-employees
					btn-text="添加抄送人"
					:all="false"
					v-model="form.temp_copy_user"
				/>
			</el-form-item>
			<el-form-item v-if="args.operate_type == 4" label="指定审批节点" prop="jump_node_id">
				<cl-select
					v-model="form.jump_node_id"
					placeholder="请选择审批节点"
					style="width: 100%;"
					filterable
				>
					<el-option
						v-for="item in args.jump_node_list"
						:key="item.node_id"
						:value="item.node_id"
						:label="item.node_name"
					/>
				</cl-select>
			</el-form-item>
			<el-form-item label="备注" prop="remark">
				<el-input
					v-model="form.remark"
					placeholder="请输入备注"
					type="textarea"
					:rows="4"
				/>
			</el-form-item>
			<el-form-item label="上传图片" prop="images">
				<cl-upload
					multiple
					:limit="3"
					:limit-size="3"
					list-type="picture-card"
					ref="uploads"
					v-model="form.images"
				/>
				<div class="s-tips">最多可上传3张图片，文件小于3M</div>
			</el-form-item>
		</el-form>
		<transition name="fade-transform">
			<div class="batch-progress" v-if="args.is_batch && saving">
				<div class="mask"></div>
				<div class="progress">
					<div>处理中...</div>
					<el-progress
						:percentage="percentage | toFixed"
						:stroke-width="14"
						text-inside
					/>
				</div>
			</div>
		</transition>
	</cl-drawer>
</template>
<script>
import SelectEmployees from "../flow-design/select-employees";
export default {
	name: "oa-refund-audit",
	components: {
		SelectEmployees
	},
	data() {
		return {
			callback: null,
			saving: false,
			percentage: 0,
			form: {
				remark: "",
				images: "",
				jump_node_id: "",
				temp_copy_user: []
			},
			rules: {
				jump_node_id: [{ required: true, message: "请选择审批节点" }]
			},
			title: "",
			args: {
				oa_id: "",
				oa_ids: [],
				jump_node_list: [],
				operate_type: 1,
				is_batch: false
			}
		};
	},
	methods: {
		open(title, args = {}, callback) {
			this.title = title;
			this.args = { ...this.args, ...args };
			this.callback = callback;
			this.$refs.drawer.create();
		},
		close() {
			this.$refs.drawer.close();
		},
		reset() {
			this.$resetFields(this.args);
			this.$refs.form.resetFields();
			this.$resetFields(this.form);
		},
		async submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				this.saving = true;
				const { oa_id, operate_type, is_batch } = this.args;
				const { images, temp_copy_user } = this.form;
				let form = {
					...this.form,
					images: images.split(",").filter(Boolean),
					operate_type,
					temp_copy_user: temp_copy_user.map(v => v.user_id)
				};
				if (!is_batch) {
					form.oa_id = oa_id;
				}

				if (is_batch) {
					await this.batchAudit(form).done(() => {
						this.saving = false;
					});
				} else {
					await this.$service.oa.audit(form).done(() => {
						this.saving = false;
					});
				}

				this.$message.success("操作成功");
				this.$bus.$emit("oa-refund:refresh");
				this.callback && this.callback();
				this.close();
			});
		},
		batchAudit(data) {
			return new Promise(async (resolve, reject) => {
				this.percentage = 0;
				const { oa_ids } = this.args;
				let list = [];
				let limit = 10;
				for (let i = 0; i < oa_ids.length; i += limit) {
					list.push(oa_ids.slice(i, i + limit));
				}
				let len = list.length;
				let ratio = 100 / len;
				const next = async index => {
					let form = {
						...data,
						oa_ids: list[index]
					};

					await this.$service.oa.batchAudit(form).catch(err => {
						reject(err);
						throw err;
					});
					this.percentage += ratio;
					if (index == len - 1) {
						setTimeout(resolve, 500);
						return;
					}
					next(index + 1);
				};
				await next(0);
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.batch-progress {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	.mask {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0.5;
		background: #fff;
	}
	.progress {
		width: 300px;
		position: relative;
		text-align: center;
		color: #fff;
		font-size: 14px;
	}
}
</style>
